@import '../../ui/base';

.priority
  position relative
  &.active
    padding-left 35px
    &::before
      left 24px
  &::before
    content ''
    width 6px
    height 6px
    border-radius 50%
    position absolute
    left 14px
    top 9px

.priority-0
  &::before
    background-color green
.priority-1
  &::before
    background-color #FF6388
.priority-2
  &::before
    background-color #FE9E49
.priority-3
  &::before
    background-color rgb(52, 144, 237)
.priority-4
  &::before
    background-color #aab4c8

.nav
  h1
    font-size 24px
    color #777
    margin-top -9px
  > div
    margin-top 5px
  > div, > div >div 
    display flex
    align-items center
  > div > div 
    > label
      color #7692B3
      font-size 12px
  > div > div + div
    margin-left 30px

.check
  font-size 12px

.item
  clear fix
  background-color #fff
  padding 28px 25px
  > *
    float left
  + .item
    border-top 1px solid #EEF2F6
  a
    &:hover
      opacity 1
      text-decoration underline
  .team
    width 110px
    word-break break-all
  .content
    margin-left 38px
    color #777
    width 225px
    word-break break-all
  .deadline
    font-size 12px
    color #8B919C
    margin-left 20px
    width 90px
    display inline-block
    height 18px
    margin-top 3px
  .progress
    margin-left 15px
    margin-top 7px
    width 235px
    align-items flex-start
    span + span
      word-break break-all
      max-width 130px
  .directors-wrapper
    margin-top 3px
    width 144px
    display inline-block
    min-height 1px
    margin-left 20px
  .directors
    font-size 12px
    background-color #ECF2FA
    border-radius 20px
    padding 0 10px
    max-width 175px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    display inline-block
    right 142px
    color rgb(139, 145, 156)
    top 16px
    a
      color rgb(139, 145, 156)
      &:hover
        text-decoration none
        opacity 1
        color #00a0f6
  .last-update
    margin-top 3px
    margin-left 20px
    color #8B919C
    font-size 12px

.list-wrapper
  margin-top 50px

.filters 
  padding 0 22px
  font-size 12px
  color #9CAEBF
  clear fix
  > *
    float left

.list
  @extends $slide-in-down
  background-color #fff
  margin-top 7px
  &:hover
    box-shadow 0 0 18px rgba(0,0,0,.1)

.item-priority
  text-align right
  position relative
  background #ECF2FA
  font-size 12px
  width 43px
  padding 2px 6px 2px 13px
  color #8b919c
  height 18px
  line-height 18px
  &::before
    content ''
    width 6px
    height 6px
    border-radius 50%
    position absolute
    left 4px
    top 6px

.pagin
  margin-top 30px

.pagin ul
  clear fix
  li
    float left
  li + li
    margin-left 8px
  a
    background-color #fff
    color #8CA9C5
    width 24px
    height 24px
    display block
    display flex
    align-items center
    justify-content center
  .active
    background-color #00A0F6
    color #fff

.disabled
  .filter, .filter.active, .filter:hover
    cursor not-allowed
    &::before
      border-bottom-color #bbb
    &::after
      border-top-color #bbb

.filter
  position relative
  color #9CAEBF
  &.active
    &::before
      border-bottom-color #bbb
    &::after
      border-top-color #00A0F6
  &:hover
    opacity 1
    &::before
      border-bottom-color #00A0F6
    &::after
      border-top-color #00A0F6
  &::before
  &::after  
    content ''
    position absolute
    right -10px
    top 4px
    z-index 10
  &::before
    content ''
    width 0
    height 0
    border-style solid
    border-width 0 4px 4px 4px
    border-color transparent transparent #00A0F6 transparent
    top 50%
    margin-top -5px
  &::after
    content ''
    width 0
    height 0
    border-style solid
    border-width 4px 4px 0 4px
    border-color #bbb transparent transparent transparent
    margin-top 0px
    top 50%

.deadline-filter
  margin-left 26px

.no-priority-filter
  .priority-filter
  .item-priority
    display none
  .deadline-filter
    margin-left 221px

.list-null
  padding 40px 0
